<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../assets/vue3/vue.global.js"></script>
    <script>
        // 1、当页面加载完成后，msg变量值作为 p 标签和 input 输入框的默认值进行显示
        // 2、当对 input 进行内容修改时 ，需要 同步 修改 p 标签的内容值
        // 3、但点击按钮时，以弹出的形式 展示 最新的 msg 变量数据
        
        // 数据驱动(响应式-数据变化与之有管理的DOM元素会自动更新) 
        //              - 以数据为主导，业务只对数据进行更新，数据的变化由框架自动完成DOM的操作

        // MVVM - 将DOM的操作进行高度封装，只为程序员提供 数据定义和视图的定义的相关语法
        //        对于DOM的操作由 实现了 MVVM 设计思想的框架进行 自动化完成
        //        + 模板语法 - 把对html元素的相关操作，以简单化的特定语法功能进行实现
        //        + 功能语法 - 将模板语法需要调用的相关数据或方法进行特定描述，提供调用支持；或者提供特殊功能实现
        window.onload = function(){
            let options = {
                data:function(){
                    return {
                        msg:"msg初始值"
                    }
                },
                methods:{
                    tipMsg:function(){
                        alert( this.msg )
                    }
                }
            }
            let app = Vue.createApp(options)
            app.mount("#app")
        }
    </script>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <input type="text" v-model="msg">
        <input type="button" value="提示" v-on:click="tipMsg()">
    </div>
</body>
</html>